<template>
  <v-card>
    <v-card-title>
      <v-btn color="primary" @click="addConsultant">新增顾问</v-btn>
      <!--搜索框，与search属性关联-->
      <v-spacer/>
      <v-flex xs3>
        <v-text-field
          append-icon="search"
          label="搜索"
          single-line
          hide-details
          v-model="filter.search"
        />
      </v-flex>
    </v-card-title>
    <v-divider/>
    <v-data-table
      :headers="headers"
      :items="consultants"
      :pagination.sync="pagination"
      :total-items="totalConsultants"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <!--<td class="text-xs-center">{{ props.item.id }}</td>-->
        <td class="text-xs-center">{{ props.item.serialNumber }}</td>
        <td class="text-xs-center">{{ props.item.name }}</td>
        <td class="text-xs-center">{{ props.item.areaName }}</td>
        <td class="text-xs-center">{{ props.item.businessTypeName }}</td>
        <td class="text-xs-center" :title="props.item.description">{{ props.item.description.substring(0,12)+'...'}}</td>
        <td class="text-xs-center">
          <img v-if="props.item.imagePath" :src="props.item.imagePath" width="130" height="40">
          <span v-else>无</span>
        </td>
        <td class="text-xs-center">{{ props.item.createDateStr }}</td>
        <td class="justify-center layout px-0">
          <v-btn icon @click="editConsultant(props.item)">
            <i class="el-icon-edit"/>
          </v-btn>
          <v-btn icon @click="deleteConsultant(props.item)">
            <i class="el-icon-delete"/>
          </v-btn>
        </td>
      </template>
    </v-data-table>
    <!--弹出的对话框-->
    <v-dialog max-width="500" v-model="show" persistent scrollable>
      <v-card>
        <!--对话框的标题-->
        <v-toolbar dense dark color="primary">
          <v-toolbar-title>{{isEdit ? '修改' : '新增'}}顾问</v-toolbar-title>
          <v-spacer/>
          <!--关闭窗口的按钮-->
          <v-btn icon @click="closeWindow"><v-icon>close</v-icon></v-btn>
        </v-toolbar>
        <!--对话框的内容，表单-->
        <v-card-text class="px-5" style="height:400px">
          <Consultant-form @close="closeWindow" :oldConsultant="oldConsultant" :isEdit="isEdit"/>
        </v-card-text>
      </v-card>
    </v-dialog>
  </v-card>
</template>

<script>
  // 导入自定义的表单组件
  import ConsultantForm from './ConsultantForm'

  export default {
    name: "consultant",
    data() {
      return {
        filter: {
          search: '', // 搜索过滤字段
        },
        search: '', // 搜索过滤字段
        totalConsultants: 0, // 总条数
        consultants: [], // 当前页品牌数据
        loading: true, // 是否在加载中
        pagination: {}, // 分页信息
        headers: [
          /*{text: 'id', align: 'center', value: 'id',sortable: false},*/
          {text: '序号', align: 'center', sortable: false, value: 'serialNumber'},
          {text: '姓名', align: 'center', sortable: false, value: 'name'},
          {text: '区域', align: 'center', sortable: false, value: 'areaName'},
          {text: '服务名称', align: 'center', value: 'businessTypeName', sortable: false},
          {text: '描述', align: 'center', value: 'description', sortable: false},
          {text: '头像', align: 'center', value: 'imagePath', sortable: false},
          {text: '发布日期', align: 'center', value: 'createDateStr', sortable: false},
          {text: '操作', align: 'center', value: 'id', sortable: false}
        ],
        show: false,// 控制对话框的显示
        oldConsultant: {}, // 即将被编辑的品牌数据
        isEdit: false, // 是否是编辑
      }
    },
    mounted() { // 渲染后执行
      // 查询数据
      this.getDataFromServer();
    },
    watch: {
      pagination: { // 监视pagination属性的变化
        deep: true, // deep为true，会监视pagination的属性及属性中的对象属性变化
        handler() {
          // 变化后的回调函数，这里我们再次调用getDataFromServer即可
          this.getDataFromServer();
        }
      }/*,
      search: { // 监视搜索字段
        handler() {
          this.getDataFromServer();
        }
      }*/,
      filter: {// 监视搜索字段
        handler() {
          this.getDataFromServer();
        },
        deep: true
      }
    },
    methods: {
      getDataFromServer() { // 从服务的加载数的方法。
        // 发起请求
        this.$http.get("/info/consultant/page", {
          params: {
            key: this.filter.search, // 搜索条件
            page: this.pagination.page,// 当前页
            rows: this.pagination.rowsPerPage,// 每页大小
            //sortBy: this.pagination.sortBy,// 排序字段
            //desc: this.pagination.descending// 是否降序
          }
        }).then(resp => { // 这里使用箭头函数
          this.consultants = resp.data.items;
          this.totalConsultants = resp.data.total;
          // 完成赋值后，把加载状态赋值为false
          this.loading = false;
        })
      },
      addConsultant() {
        // 修改标记
        this.isEdit = false;
        // 控制弹窗可见：
        this.show = true;
        // 把oldConsultant变为null
        this.oldConsultant = null;
      },
      getDataFromApi(){
        var t=this;
        this.loading=!0;
        debugger;
          setTimeout(function(){t.items=o.b.slice(0,4),t.totalItems=25,t.loading=!1},300)
      },
      async editConsultant(oldConsultant){
        // 修改标记
        this.isEdit = true;
        // 控制弹窗可见：
        this.show = true;
        // 获取要编辑的Consultant
        this.oldConsultant = oldConsultant;
      },
      deleteConsultant(oldConsultant) {
        this.$message.confirm('此操作将永久删除该顾问信息, 是否继续?').then(() => {
          this.$http.delete("/info/consultant/delete",{data:oldConsultant}).then(() => {
            this.$message.success("删除成功！");
            this.consultants.splice(this.consultants.indexOf(oldConsultant),1);
          })
        }).catch(() => {
          this.$message.info("删除已取消！");
        });
      },
      closeWindow(){
        // 重新加载数据
        this.getDataFromServer();
        // 关闭窗口
        this.show = false;
      }
    },
    components:{
      ConsultantForm: ConsultantForm
    }
  }



</script>

<style scoped>

</style>
